
<template>
    <div class="body_list_wp">
        <div class="left">
            <!-- <div>
                <span class="name"><span>首页</span><i class="active"
                        v-if="storeChart.selectBodyListTable != '首页'"></i></span>
            </div> -->
            <div @click="storeChart.changeSelectBodyListTable('期货')">
                <span class="name"><span>期货</span><i class="active"
                        v-if="storeChart.selectBodyListTable != '期货'"></i></span>
            </div>
            <!-- <div>
                <span class="name"><span>期权</span><i class="active"
                        v-if="storeChart.selectBodyListTable != '期权'"></i></span>
            </div> -->
            <!-- <div @click="storeChart.changeSelectBodyListTable('外盘')">
                <span class="name"><span>外盘</span><i class="active"
                        v-if="storeChart.selectBodyListTable != '外盘'"></i></span>
            </div> -->
            <!-- <div>
                <span class="name name1"><span>银行OTC</span><i class="active"
                        v-if="storeChart.selectBodyListTable != '银行OTC'"></i></span>
            </div> -->
            <!-- <div>
                <span class="name"><span>股票</span><i class="active"
                        v-if="storeChart.selectBodyListTable != '股票'"></i></span>
            </div> -->
        </div>
        <div class="right">
            <div class="right_body">
                <div class="right_body_list" id="right_body_list" @contextmenu.prevent.stop="openRightMenu()">
                    <div class="list_title">
                        <span class="xu_hao">序号</span>
                        <span v-for="item in hagnqingtitle" :key="item.Type" :style="{ width: item.Minwidth + 'px' }"
                            @click="increaseTap(item)">{{
                                item.Title }}</span>
                        <span class="empty">empty</span>
                    </div>
                    <div class="list_list" v-for="(item, index) in hagnqingData" :key="item.heyue_id"
                        @click="selectTap(item)" @dblclick="navChart" @contextmenu.prevent.stop="openRightMenu(item)">
                        <span class="xu_hao yellow" :class="{ active: storeMain.selectHeyue?.heyue_id == item.heyue_id }">
                            <i class="iconfonMy icon-arrowTop red" v-if="item.currentPrice > item.settlementYes"></i>
                            <i class="iconfonMy icon-arrowBottom green" v-if="item.currentPrice < item.settlementYes"></i>
                            {{ index + 1 }}
                        </span>
                        <span v-for="(ci, idx) in hagnqingtitle" :key="ci.Type" :title="item.childrenData[idx]?.val"
                            :class="[item?.childrenData[idx]?.color, { active: storeMain.selectHeyue?.heyue_id == item.heyue_id }]"
                            :style="{ width: ci.Minwidth + 'px', paddingRight: ci.Type == 2 ? '10px' : '' }">{{
                                item.childrenData[idx]?.val }}
                            <i class="zhu_bz_type" v-if="ci.Type == 2 && item.zhu_bz == 1">M</i>
                        </span>
                        <span class="empty"
                            :class="{ active: storeMain.selectHeyue?.heyue_id == item.heyue_id }">empty</span>
                    </div>
                </div>
                <div class="icon icon1" v-show="isScrollLeft" @click="slidingX('right')"><i
                        class="iconfonMy icon-xiangshangzhanhang"></i></div>
                <div class="icon icon2" v-show="!isScrollLeft" @click="slidingX('left')"><i
                        class="iconfonMy icon-xiangshangzhanhang"></i></div>
            </div>
            <div class="botton">
                <span @click="storeChart.changeSelectBodyListbottom(item)"
                    :class="{ active: storeChart.selectBodyListbottom == item }" v-for="item in storeChart.BodyListbottom"
                    :key="item">{{ item }}</span>
            </div>
        </div>

    </div>
</template>

<script setup>
import moment from 'moment'
import { ref, onMounted, computed, watch } from 'vue';
const { ipcRenderer } = require('electron');
import { ElNotification } from 'element-plus';
import { mainStore, chartStore } from '@/store/index.js';
import bus from '@/utils/bus.js'
moment.locale("zh-cn");

const storeMain = mainStore();
const storeChart = chartStore();

const hagnqingDataJisuan = computed(() => {
    if (!storeChart.hqData) return []
    let arrList = Object.values(storeChart.hqData)
    let arr = arrList.map(item => {
        let childrenData = [
            { val: item.heyue_name || '----', color: 'yellow' },
            { val: item.currentPrice || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.xianshou || '----', color: 'yellow' },
            { val: item.buy1 || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.seller1 || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.buyVol1 || '----', color: 'yellow' },
            { val: item.sellingVol1 || '----', color: 'yellow' },
            { val: item.volume || '----', color: 'yellow' },
            { val: item.nowUpw || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.nowGain || '----', color: item.nowGain > 0 ? 'red' : item.nowGain < 0 ? 'green' : 'yellow' },
            { val: item.inventory || '----', color: 'yellow' },
            { val: item.rizeng || '----', color: 'yellow' },
            { val: item.openingToday || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.highestPrice || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.lowestPrice || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.closedYes || '----', color: '' },
            { val: '----' || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: item.settlementYes || '----', color: '' },
            { val: '----' || '----', color: item.nowGain > 0 ? 'red' : item.nowUpw < 0 ? 'green' : '' },
            { val: '----' || '----', color: item.nowGain > 0 ? 'red' : item.nowUpw < 0 ? 'green' : '' },
            { val: '----' || '----', color: 'yellow' },
            { val: '----' || '----', color: 'yellow' },
            { val: '----' || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : '' },
            { val: '----' || '----', color: item.nowUpw > 0 ? 'red' : item.nowUpw < 0 ? 'green' : 'yellow' },
            { val: '----' || '----', color: 'yellow' },
            { val: '----' || '----', color: 'yellow' },
            { val: item.heyue_danwei || '----', color: 'yellow' },
            { val: item.huobi_name || '----', color: 'yellow' },
            { val: '----' || '----', color: 'yellow' },
            { val: item.shichang_name || '----', color: 'yellow' },
            { val: item.heyue_bh || '----', color: 'yellow' },
            { val: '----' || '----', color: 'yellow' },
        ]
        item.childrenData = childrenData
        let a = true
        if (storeChart.selectBodyListTable == '期货' && item.jiekou_id == 1) {
            a = false
        }
        if (storeChart.selectBodyListTable == '外盘' && item.jiekou_id == 2) {
            a = false
        }
        if (a) { return }
        if (storeChart.selectBodyListbottom == '主力合约') {
            if (item.zhu_bz == 1) {
                if (storeMain.zixuanHeyue['隐藏合约'] && storeMain.zixuanHeyue['隐藏合约'].some(element => element == item.heyue_id) || storeMain.zixuanHeyue['删除合约'] && storeMain.zixuanHeyue['删除合约'].some(element => element == item.heyue_id)) {
                    return false
                } else {
                    return item
                }
            } else {
                return false
            }
        } else if (storeChart.selectBodyListbottom == '全部') {
            if (storeMain.zixuanHeyue['隐藏合约'] && storeMain.zixuanHeyue['隐藏合约'].some(element => element == item.heyue_id) || storeMain.zixuanHeyue['删除合约'] && storeMain.zixuanHeyue['删除合约'].some(element => element == item.heyue_id)) {
                return false
            } else {
                return item
            }
        } else {
            if (storeChart.selectBodyListbottom == '删除合约') {
                if (storeMain.zixuanHeyue[storeChart.selectBodyListbottom] && storeMain.zixuanHeyue[storeChart.selectBodyListbottom].some(element => element == item.heyue_id)) {
                    return item
                } else {
                    return false
                }
            } else if (storeChart.selectBodyListbottom == '隐藏合约') {
                if (storeMain.zixuanHeyue['删除合约'] && storeMain.zixuanHeyue['删除合约'].some(element => element == item.heyue_id)) {
                    return false
                } else {
                    if (storeMain.zixuanHeyue[storeChart.selectBodyListbottom] && storeMain.zixuanHeyue[storeChart.selectBodyListbottom].some(element => element == item.heyue_id)) {
                        return item
                    } else {
                        return false
                    }
                }
            }
            else {
                if (storeMain.zixuanHeyue['隐藏合约'] && storeMain.zixuanHeyue['隐藏合约'].some(element => element == item.heyue_id) || storeMain.zixuanHeyue['删除合约'] && storeMain.zixuanHeyue['删除合约'].some(element => element == item.heyue_id)) {
                    return false
                } else {
                    if (storeMain.zixuanHeyue[storeChart.selectBodyListbottom] && storeMain.zixuanHeyue[storeChart.selectBodyListbottom].some(element => element == item.heyue_id)) {
                        return item
                    } else {
                        return false
                    }
                }
            }
        }
    })
    arr = arr.filter(item => item)
    arr.sort((a, b) => {
        if (a.shichang_name < b.shichang_name) return -1;
        if (a.shichang_name > b.shichang_name) return 1;

        // 如果交易所相同，按品种排序
        if (a.heyue_bh < b.heyue_bh) return -1;
        if (a.heyue_bh > b.heyue_bh) return 1;

        // 如果交易所和品种都相同，按编号排序
        return a.heyue_id - b.heyue_id;
    });
    return arr
});

watch(hagnqingDataJisuan, newVal => {
    hagnqingData.value = newVal
}, { deep: true })

const hagnqingData = ref([])
const sortingStatus = ref(1)
const isInit = ref(true)
const isScrollLeft = ref(true)
const hagnqingtitle = ref([
    { Type: 2, Title: "合约名称", Minwidth: 105 },
    { Type: 3, Title: "最新", Minwidth: 85 },
    { Type: 4, Title: "现手", Minwidth: 50 },
    { Type: 5, Title: "买价", Minwidth: 70 },
    { Type: 6, Title: "卖价", Minwidth: 70 },
    { Type: 7, Title: "买量", Minwidth: 50 },
    { Type: 8, Title: "卖量", Minwidth: 51 },
    { Type: 9, Title: "成交量", Minwidth: 78 },
    { Type: 10, Title: "涨跌", Minwidth: 90 },
    { Type: 11, Title: "涨幅%", Minwidth: 73 },
    { Type: 12, Title: "持仓量", Minwidth: 80 },
    { Type: 13, Title: "日增仓", Minwidth: 80 },
    { Type: 14, Title: "开盘", Minwidth: 70 },
    { Type: 15, Title: "最高", Minwidth: 70 },
    { Type: 16, Title: "最低", Minwidth: 70 },
    { Type: 17, Title: "昨收", Minwidth: 70 },
    { Type: 18, Title: "结涨", Minwidth: 70 },
    { Type: 19, Title: "昨结算", Minwidth: 70 },
    { Type: 20, Title: "速涨", Minwidth: 70 },
    { Type: 21, Title: "现涨", Minwidth: 70 },
    { Type: 22, Title: "现增仓", Minwidth: 70 },
    { Type: 23, Title: "动态", Minwidth: 51 },
    { Type: 24, Title: "沉淀资金", Minwidth: 70 },

    { Type: 25, Title: "资金流向", Minwidth: 70 },
    { Type: 26, Title: "趋势度", Minwidth: 60 },
    { Type: 27, Title: "投机度", Minwidth: 70 },

    { Type: 28, Title: "报价单位", Minwidth: 100 },
    { Type: 29, Title: "交易单位", Minwidth: 80 },
    { Type: 30, Title: "最后交易日", Minwidth: 90 },
    { Type: 31, Title: "交易所", Minwidth: 70 },
    { Type: 32, Title: "代码", Minwidth: 60 },
    // { Type: 33, Title: "博富码", Minwidth: 61 },
]);

ipcRenderer.on('right_click_msg_win', async (e, v) => {
    let msg = ''
    if (v.type == '取消自选') {
        storeMain.setZixuanHeyue({ type: 2, name: '自选合约', id: storeMain.selectHeyue.heyue_id })
        msg = '已移出自选'
    }
    if (v.type == '删除合约') {
        storeMain.setZixuanHeyue({ type: 1, name: '删除合约', id: storeMain.selectHeyue.heyue_id })
        msg = '品种已删除'
    }
    if (v.type == '恢复合约') {
        storeMain.setZixuanHeyue({ type: 2, name: '删除合约', id: storeMain.selectHeyue.heyue_id })
        msg = '品种已恢复'
    }
    if (v.type == '隐藏品种') {
        storeMain.setZixuanHeyue({ type: 1, name: '隐藏合约', id: storeMain.selectHeyue.heyue_id })
        msg = '品种已隐藏'
    }
    if (v.type == '取消隐藏品种') {
        storeMain.setZixuanHeyue({ type: 2, name: '隐藏合约', id: storeMain.selectHeyue.heyue_id })
        msg = '品种已取消隐藏'
    }
    if (v.type == '切换合约') {
        let obj = JSON.parse(v.orderInfo)
        let pankou = '外盘'
        if (obj.jiekou_id == 1) {
            pankou = '期货'
        }
        storeChart.changeSelectBodyListTable(pankou)
        storeChart.changeSelectBodyListbottom('全部')
        storeMain.setClassHeyueIndex(obj.shichang_name)
        storeMain.changeHeyueinfo(obj)
        storeChart.setSelectBodyListHeyueTable(storeChart.hqData)
        let isHeyue = storeMain.classHeyue[storeMain.classHeyueIndex][obj.heyue_bh]
        if (!isHeyue) {
            bus.emit('qie_hang_qing')
        }
        storeChart.changeSelectbodyChartListTab('K线图')
        storeChart.changeBodyType('chart')
        storeChart.changeKlineAPiVal('K线')
        bus.emit('changeHeadApiVal', { type: 'K线' })
    }
    if (msg) {
        ElNotification({
            title: '操作提示',
            message: msg,
            position: 'bottom-right',
            duration: 1000,
        })
    }
})

onMounted(() => {
    init();
})
const init = () => {
    isInit.value = false;
}

function increaseTap(item) {
    if (item.Title == "涨幅%" && sortingStatus.value == 1) {
        hagnqingData.value.sort((a, b) => b.childrenData[9].val - a.childrenData[9].val);
        sortingStatus.value = 2
        return
    }
    if (item.Title == "涨幅%" && sortingStatus.value == 2) {
        hagnqingData.value.sort((a, b) => a.childrenData[9].val - b.childrenData[9].val);
        sortingStatus.value = 1
        return
    }
}

const openRightMenu = (item) => {
    if (item) selectTap(item)
    ipcRenderer.send('open-right-click', 'rightClickGHangQing')
}

const selectTap = (item) => {
    storeMain.changeHeyueinfo(item)
    storeChart.setSelectBodyListHeyueTable(storeChart.hqData)
    let obj = { ...item }
    delete obj.childrenData
    obj.islist = 1
    ipcRenderer.send('send-placeAnOrder', obj)
}
const navChart = () => {
    storeChart.changeSelectbodyChartListTab('分时图')
    storeChart.changeBodyType('chart')
    storeChart.changeKlineAPiVal('分时')
}
const slidingX = (type) => {
    const element = document.getElementById('right_body_list'); // 替换为你的元素 ID
    if (element) {
        if (type == 'right') {
            element.scrollLeft = element.scrollWidth - element.clientWidth;
        }
        if (type == 'left') {
            element.scrollLeft = 0;
        }
        isScrollLeft.value = !isScrollLeft.value
    }
}
</script>

<style lang="scss" scoped>
.body_list_wp {
    height: 100%;
    position: relative;
    display: flex;

    .red {
        color: #ff3c3c;
    }

    .green {
        color: #00dc00;
    }

    .yellow {
        color: #dcdc0a;
    }

    .left {
        background-color: #23262a;
        height: 100%;
        width: 30px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        padding: 19px 0 20px 7px;

        div {
            border-radius: 4px;
            border-bottom-left-radius: 0;
            width: 23px;
            height: 67px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 14px;

            .name {
                height: 80px;
                background-color: #000;
                clip-path: polygon(0% 78%, 100% 100%, 100% 0%, 0% 0%);
                box-shadow: 0 0 0 2px #000;
                border: 4px #000 solid;
                position: relative;

                span {
                    writing-mode: vertical-rl;
                    text-orientation: mixed;
                    position: relative;
                    top: 20px;
                    z-index: 20;
                }
            }

            .name1 {
                span {
                    top: 6px;
                }
            }

            .active {
                height: 77px;
                position: absolute;
                left: -3px;
                top: -3px;
                background-color: #23262a;
                clip-path: polygon(0% 78%, 100% 100%, 100% 0%, 0% 0%);
                border: 11px #23262a solid;
            }
        }
    }

    .right {
        position: relative;
        width: calc(100% - 30px);
        padding: 2px;

        .right_body {
            height: calc(100% - 26px);
            position: relative;
            font-size: 14px;
            width: 100%;

            .right_body_list {
                overflow: scroll;
                height: 100%;

                .list_title {
                    background-color: #000;
                    color: #00cbcb;
                    white-space: nowrap;
                    position: sticky;
                    top: 0;
                    z-index: 20;

                    span {
                        background-color: #000;
                        display: inline-block;
                        border-bottom: 1px solid #800e07;
                        height: 25px;
                        line-height: 25px;
                        text-align: right;
                    }

                    .xu_hao {
                        background-color: #000;
                        position: sticky;
                        left: 0;
                        width: 52px;
                        height: 25px;
                        line-height: 25px;
                    }

                    .empty {
                        color: transparent;
                        height: 25px;
                        width: 60px;
                    }
                }

                .list_list {
                    white-space: nowrap;
                    height: 28px;
                    line-height: 28px;

                    span {
                        display: inline-block;
                        border-bottom: 1px solid transparent;
                        border-top: 1px solid transparent;
                        height: 28px;
                        line-height: 28px;
                        font-size: 15px;
                        position: relative;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: right;


                        .zhu_bz_type {
                            font-size: 9px;
                            position: absolute;
                            font-weight: bold;
                            top: -3px;
                            right: -1px;
                            color: #b63322;
                        }
                    }

                    .active {
                        border-color: #800e07;
                    }

                    .xu_hao {
                        background-color: #000;
                        position: sticky;
                        left: 0;
                        width: 52px;
                        height: 28px;
                        line-height: 28px;
                        z-index: 10;

                        i {
                            float: left;
                        }
                    }

                    .empty {
                        color: transparent;
                        height: 28px;
                        width: 60px;
                    }
                }

            }


            .icon {
                position: absolute;
                top: -0;
                padding-right: 10px;
                padding-top: 4px;
                overflow: hidden;
                height: 25px;
                z-index: 200;

                i {
                    display: inline-block;
                    color: #b4b408;
                    transform: rotateZ(90deg);
                }
            }

            .icon1 {
                right: 0;
            }

            .icon2 {
                left: 0;

                i {
                    transform: rotateZ(-90deg);
                }
            }
        }

        .botton {
            background-color: #181a1d;
            display: flex;
            align-items: center;
            line-height: 26px;
            height: 26px;
            padding: 0 20px;

            span {
                padding: 0 10px;
            }

            .active {
                color: #ba5c20;
                background-color: #23262a;
            }
        }
    }

}
</style>
